<template>
  <div class="top-banner md:h-[900px] h-[700px] relative" id="scene-container">
    <div class="relative z-20 fade-in-element" id="home">
      <div>
        <div class="text-center font-weight-bold">
          <div class="md:text-5xl text-3xl md:pt-[180px] pt-[144px]">
            <div class="mb-2 md:mb-4">通过使用 <span class="banner-text-highlight">Savetrx 能量</span></div>
            <div> 为您的 TRX 交易节省费用 </div>
          </div>
        </div>
      </div>
      <div class="md:h-[456px] h-[286px] max-w-[750px] mx-auto relative bounce-box mt-12">
        <div class="absolute w-full h-full lightning-back"></div>
        <div class="absolute w-full h-full lightning-font flash-animation-font"></div>
        <div class="absolute hidden w-full h-full lightning-middle"></div>
        <div class="left-icon"></div>
        <div class="right-icon"></div>
      </div>
    </div>
    <!-- <canvas data-engine="three.js r158" width="1482" height="711" style="display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 10;"></canvas> -->
  </div>
</template>

<script>
export default {
  name: 'Banner'
}
</script>

<style scoped>
/* Add your styles here */
</style>